<template>
	<view class="content">
		<u-toast ref="uToast"></u-toast>
		<view class="header">
			<image src="../../static/img/veizuLogo.jpg"></image>
		</view>
		<view class="title">
			<text>微著巡音</text>
			<uni-badge :offset="[-8, -20]" text="R" absolute="rightTop" type="primary" />
		</view>
		<view class="list" v-if="state==0">
			<view class="list-call">
				<image class="img" src="../../static/img/userIcon.png"></image>
				<input class="sl-input" v-model.trim="userName" name="userName" maxlength=14 type="text"
					placeholder="请输入您的用户名" @focus="show=0" />
				<u-icon v-if="loginlog.length!==0" :name="show=='0'?'arrow-down':'arrow-up'" color="#909399" size="28"
					top="5px" @click="quicklogin">
				</u-icon>
			</view>
			<view style="position: relative;" v-if="show==1">
				<view class="loginview">
					<scroll-view scroll-y="true" style="height: 100%;">
						<uni-list>
							<uni-list-item v-for="(item,index) in loginlog" :key="item.userName">
								<template v-slot:header>
									<view class="slot-box" @click="pitchon(item.userName)">
										<uni-icons type="contact-filled" color="#3c9cff" size="35"></uni-icons>
									</view>
								</template>
								<template v-slot:body>
									<text class="slot-box slot-text"
										@click="pitchon(item.userName)">{{item.userName}}</text>
								</template>
								<template v-slot:footer>
									<view class="slot-box" @click="deleteuser(item.userName)">
										<uni-icons type="closeempty" color="#909399" size="20"></uni-icons>
									</view>
								</template>
							</uni-list-item>
						</uni-list>
					</scroll-view>
				</view>
			</view>
			<view class="list-call">
				<image class="img" src="../../static/img/passwordIcon.png"></image>
				<input class="sl-input" v-model="password" name="password" maxlength=20 type="password"
					placeholder="请输入您的密码" password="true" />
			</view>
		</view>
		<view class="list" v-else>
			<view class="list-call">
				<image class="img" src="../../static/img/phone.png"></image>
				<input class="sl-input" v-model.trim="phone" name="phone" maxlength=11 type="number"
					placeholder="请输入您绑定的手机号" />
				<u-tag :text="text" plain size="medium" type="primary" @click="getcode">
				</u-tag>
			</view>
			<view class="list-code">
				<u-code-input v-model="code" maxlength="4" space='15'></u-code-input>
			</view>
		</view>
		<view class="agreenment" v-if="state==0">
			<navigator url="regist" open-type="redirect">没有账号,立即注册!</navigator>
			<navigator class="navigat" url="forgetPwd" open-type="navigate">忘记密码</navigator>
		</view>
		<view class="button-login" hover-class="button-hover" @click="login()">
			<text>登录</text>
		</view>
		<view class="divider">
			<u-divider :text="state==0?'手机号登录':'账号密码登录'" lineColor='#8f939c' textColor='#8f939c' :hairline='false'>
			</u-divider>
		</view>
		<view class="footheader">
			<image :src="userphonesrc" @click="userphone"></image>
		</view>
		<view class="appnumber">
			当前小程序版本:{{PhoneInfo.appNumber}}
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				extraIcon: {
					color: '#3c9cff',
					size: '35',
					type: 'contact-filled'
				},
				show: 0, //0表示关闭  1表示打开
				userName: '',
				password: '',
				state: 0, //0表示当前是用户名登录  1表示是手机号登录
				userphonesrc: '../../static/img/phonelogin.png',
				phone: '',
				code: '',
				text: '获取验证码',
				time: 60,
				timer: '',
				loginlog: [], //登录日志
				PhoneInfo: '',
			};
		},
		onShow() {
			if (uni.getStorageSync('loginlog') !== '' && uni.getStorageSync('loginlog') !== undefined && uni
				.getStorageSync('loginlog') !== null) {
				this.loginlog = uni.getStorageSync('loginlog');
			}
			this.userName = ''
			this.password = ''
			this.phone = ''
			this.code = ''
			//获取小程序版本号
			this.PhoneInfo = this.$utils.GetPhoneInfo();
		},
		methods: {
			//打开用户列表
			quicklogin() {
				if (this.show == 1) {
					this.show = 0;
				} else {
					this.show = 1;
				}
			},
			//选中用户
			pitchon(value) {
				for (let item of this.loginlog) {
					if (item.userName == value) {
						this.userName = item.userName;
						this.password = item.password;
					}
				}
				this.show = 0;
			},
			//删除用户
			deleteuser(value) {
				//点击   x  删除用户记录
				for (var item = 0; item < this.loginlog.length; item++) {
					if (this.loginlog[item].userName == value) {
						this.loginlog.splice(item, 1)
						//删除完成以后将新数组放到storage中
						uni.setStorageSync('loginlog', this.loginlog)
					}
				}
				//判断当数组长度为0的时候将用户记录列表关闭
				if (this.loginlog.length == 0) {
					this.show = 0;
				}
			},
			//获取验证码
			getcode() {
				if (this.phone.length !== 11) {
					this.$utils.showToast(this, '手机号格式输入错误！', 'warning');
					return;
				}
				if (this.timer !== '') {
					this.$utils.showToast(this, '验证码已发送！', 'warning');
					return;
				} else {
					var code = {
						phoneNumber: this.phone,
					}
					uni.showLoading({
						title: "发送中...",
						mask: true,
					});
					uni.request({
						url: getApp().globalData.serverAddress + this.$uri.Uri_getcode,
						data: JSON.stringify(code),
						dataType: "json",
						method: "POST",
						success: (res) => {
							if (res.statusCode !== 200) {
								this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
								return
							}
							if (res.data.data.code == 0) {
								this.$utils.showToast(this, '发送成功！', 'success');
								// 开启60秒倒计时
								this.getValidStr();
								this.timer = setInterval(this.getValidStr, 1000)
							} else {
								this.$utils.showToast(this, res.data.msg, 'error');
							}
						},
						fail() {
							this.$utils.showToast(this, "发送失败！", 'error');
						},
						complete() {
							uni.hideLoading();
						}
					})
				}
			},
			//倒计时时间判断
			getValidStr() {
				if (this.time >= 0 && this.time <= 60) {
					this.time--;
					if (this.time !== 0) {
						this.text = "倒计时" + this.time + "s";
					} else {
						clearInterval(this.timer);
						this.text = "获取验证码";
						this.time = 60;
						this.timer = '';
					}
				}
			},
			//用户名和手机号切换
			userphone() {
				this.show = 0;
				this.userName = ''
				this.password = ''
				this.phone = ''
				this.code = ''
				if (this.state == 0) {
					this.state = 1;
					this.userphonesrc = '../../static/img/userlogin.png';
				} else {
					this.state = 0;
					this.userphonesrc = '../../static/img/phonelogin.png';
				}
			},
			//当前登录按钮操作
			login() {
				this.show = 0;
				if (this.state == 0) {
					if (!this.userName) {
						this.$utils.showToast(this, '请输入用户名！', 'warning');
						return;
					}
					if (this.userName !== '') {
						var ruler = /^[A-Za-z0-9]+$/;
						if (!ruler.test(this.userName)) {
							this.$utils.showToast(this, '用户名由字母和数字组成！', 'warning');
							return;
						}
					}
					if (this.userName.length < 4) {
						this.$utils.showToast(this, '用户名最少4位！', 'warning');
						return;
					}
					if (!this.password) {
						this.$utils.showToast(this, '请输入密码！', 'warning');
						return;
					}
					if (this.password.length < 6) {
						this.$utils.showToast(this, '密码最少6位！', 'warning');
						return;
					}
					let loginModel = new Object();
					loginModel.userName = this.userName;
					loginModel.password = this.password;
					uni.showLoading({
						title: "登录中...",
						mask: true,
					});
					uni.request({
						url: getApp().globalData.serverAddress + this.$uri.Uri_Login,
						data: JSON.stringify(loginModel),
						dataType: "json",
						method: "POST",
						success: (res) => {
							if (res.statusCode !== 200) {
								this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
								return
							}
							if (res.data.code == 0) {
								//登录成功以后将账号和密码保存到setstorange中
								//保存的时候判断是否存在如果存在则替换,不存在的话 那就保存登录
								var add = true;
								if (this.loginlog.length !== 0) {
									for (let item of this.loginlog) {
										if (item.userName == loginModel.userName) {
											item.password = loginModel.password;
											add = false;
										}
									}
									if (add) {
										this.loginlog.push(loginModel)
									}
								} else {
									this.loginlog.push(loginModel)
								}
								uni.setStorageSync('loginlog', this.loginlog)
								uni.setStorageSync('userinfo', res.data.data);
								this.$utils.showToast(this, '登录成功！', 'success', 3, '/pages/tabbar/HomePage');
							} else {
								this.$utils.showToast(this, res.data.msg, 'error');
							}
						},
						fail: (res) => {
							this.$utils.showToast(this, "登录失败！", 'error');
						},
						complete() {
							uni.hideLoading();
						}
					})
				} else {
					if (this.phone.length !== 11) {
						this.$utils.showToast(this, '手机号格式输入错误！', 'warning');
						return;
					}
					let phonedate = new Object();
					phonedate.phoneNumber = this.phone;
					phonedate.VerifyCode = this.code;
					uni.showLoading({
						title: "登录中...",
						mask: true,
					});
					uni.request({
						url: getApp().globalData.serverAddress + this.$uri.Uri_cellphonelogin,
						data: JSON.stringify(phonedate),
						dataType: "json",
						method: "POST",
						success: (res) => {
							if (res.statusCode !== 200) {
								this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
								return
							}
							if (res.data.code == 0) {
								uni.setStorageSync('userinfo', res.data.data);
								this.$utils.showToast(this, '登录成功！', 'success', 3, '/pages/tabbar/HomePage');
							} else {
								this.$utils.showToast(this, res.data.msg, 'error');
							}
						},
						fail: (res) => {
							this.$utils.showToast(this, "登录失败！", 'error');
						},
						complete() {
							uni.hideLoading();
						}
					})
				}
			},
		}
	};
</script>
<style lang="scss">
	.title {
		width: 100%;
		font-family: "楷体";
		font-weight: bold;
		font-size: 50rpx;
		color: #2979ff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 40rpx 0rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.header {
		width: 161rpx;
		height: 161rpx;
		background: rgba(63, 205, 235, 1);
		box-shadow: 0rpx 12rpx 13rpx 0rpx rgba(63, 205, 235, 0.47);
		border-radius: 50%;
		margin-top: 30%;
		margin-left: auto;
		margin-right: auto;
	}

	.header image {
		width: 161rpx;
		height: 161rpx;
		border-radius: 50%;
	}

	.list {
		display: flex;
		flex-direction: column;
		padding-left: 70rpx;
		padding-right: 70rpx;
	}

	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		color: #333333;
		border-bottom: 0.5px solid #e2e2e2;
	}

	.list-code {
		margin: 10rpx auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		color: #333333;
	}

	.list-call .img {
		width: 38rpx;
		height: 38rpx;
	}

	.list-call .sl-input {
		flex: 1;
		text-align: left;
		font-size: 32rpx;
		margin-left: 16rpx;
	}

	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 550rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 80rpx;
	}

	.button-hover {
		background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
	}

	.agreenment {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #FFA800;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
	}

	.agreenment text {
		font-size: 24rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}

	.navigat {
		margin-left: 28%;
	}

	.divider {
		width: 550rpx;
		margin: auto;
	}

	.footheader {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-top: 30rpx;
		margin: auto;
	}

	.footheader image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.loginview {
		width: 100%;
		position: absolute;
		background-color: #f2f5f9;
		z-index: 1000;
		overflow: hidden;
		height: 110px;
	}

	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.slot-text {
		flex: 1;
		font-size: 16px;
		color: #3c9cff;
		margin: 0px 5px;
	}

	.uni-list {
		background-color: #f2f5f9 !important;
	}

	.appnumber {
		margin: 50% auto 0%;
		color: #909399;
	}
</style>